RWD 設計原則

行動裝置友善設計: mobile first - 先從最小螢幕尺寸開始考慮，小螢幕所顯示的內容和能運用的佈局有限，因此，優先考慮，隨著螢幕尺寸加大，再追加內容。

RWD有5種不同的流動模式:

• 主體為流動 (mostly fluid)
• 欄內容下排 (column drop)
• 版面配置位移 (layout shifter)
• 微小調整 (tiny tweaks)
• 畫布外空間利用 (off canvas)

主體為流動 (mostly fluid)

「流動」即內容佈局會隨著 viewport 尺寸而流動。
這種模式有以下特性：
在小螢幕上，內容垂直堆疊；但在大螢幕上，內容會排列成多欄
當 viewport 放大到達某個 breakpoint 時，內容會停止流動，固定置中，因此不需要設定多餘的 breakpoint，又能維持網頁易讀性。